import { useState, useEffect } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { routeList, iconList, getUserInfo } from "../../util/index";
import "./index.less";

const pathI: any = {
  '/chat': 0,
  '/book': 1,
  '/profile': 2
}

function Sidebar() {
  const [active, setActive] = useState(0);
  const [pageStatus, setPageStatus] = useState(false);
  const navigate = useNavigate();
  const location = useLocation();
  const currentPath = location.pathname;
  const userInfo = getUserInfo();

  const handleToggle = (i: number) => {
    setActive(i);
    navigate(routeList[i].path);
  };

  const handleToProfile = () => {
    navigate('/profile');
  }

  useEffect(() => {
    setPageStatus(currentPath !== "/");
    setActive(pathI[currentPath])
  }, [currentPath]);

  return (
    <>
      {pageStatus && (
        <div className="sidebar">
          <img
            className="avatar"
            src={userInfo.avatar}
            onClick={handleToProfile}
            alt=""
          />
          <div className="group">
            {iconList.map((x, i) => {
              return (
                <div
                  style={{
                    backgroundImage: `url(${active === i ? x.actImg : x.defaultImg
                      })`,
                  }}
                  className="icon"
                  key={x.type}
                  onClick={() => handleToggle(i)}
                ></div>
              );
            })}
          </div>
        </div>
      )}
    </>
  );
}

export default Sidebar;
